<template>
  <div>
    <!--轮播-->
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <!--主体-->
    <div class="content">
      <Row :gutter="16">
        <i-col span="6">
          <!--快速入口-->
          <div class="com left">
            <p>快速入口</p>
            <Row :gutter="16" style="padding-top: 10px;margin: 0">
              <i-col span="12" style="background-color: #f3f3f3">
                <router-link to="/journalHygiene" class="tu1"></router-link>
              </i-col>
              <i-col span="12" style="background-color: #f3f3f3">
                <a href="http://www.cnmedja.com/VuePeriodicalManage/#/login" class="tu2" target="_blank"></a>
                <!--                <router-link to="/paperSubmission" ></router-link>-->
              </i-col>
              <i-col span="12" style="background-color: #f3f3f3">
                <router-link to="/law" class="tu3"></router-link>
              </i-col>
              <i-col span="12" style="background-color: #f3f3f3">
                <router-link to="/paperSubmission" class="tu4"></router-link>
              </i-col>
            </Row>
          </div>
          <!--公告通知-->
          <div class="com left" style="margin-top: 20px">
            <p>
              <span>公告通知</span>
              <router-link to="/announcementNotice" class="more">更多></router-link>
            </p>
            <div class="industry" style="padding-left: 20px">
              <ul>
                <li v-for="dynamic in data">
                  <router-link :to="{path:dynamic.uri,query:{id:dynamic.id,activeIndex:4}}" class="a">
                    <span>{{dynamic.title}}</span>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
          <!--期刊加盟-->
          <div class="com left" style="margin-top: 20px">
            <p>
              <span>期刊加盟</span>
            </p>
            <div class="industry" style="padding-left: 20px">
              <ul>
                <li style="list-style:disc" v-for="league in league">
                  <router-link :to="{path:league.uri,query:{id:league.id,activeIndex:4}}" class="a">
                    <span>{{league.title}}</span>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </i-col>
        <i-col span="17" offset="1">
          <!--期刊动态-->
          <div class="com">
            <p>
              <span>{{industryTrends.dynamic}}</span>
              <router-link :to="industryTrends.link" class="more">更多></router-link>
            </p>
            <Row :gutter="16">
              <i-col span="6">
                <div class="industry">
                  <router-link :to="industryTrends.link">
                    <img :src="industryTrends.src" alt="">
                  </router-link>
                </div>
              </i-col>
              <i-col span="18">
                <news :data="industryTrends.data" :activeIndex='0'></news>
              </i-col>
            </Row>
          </div>
          <!--线上课程-->
          <div class="com">
            <p>
              <span>{{OnlineCourses.dynamic}}</span>
              <router-link :to="OnlineCourses.link" class="more">更多></router-link>
            </p>

            <Row :gutter="16" v-if="OnlineCourses.type=='video'">
              <i-col span="6">
                <div class="industry">
                  <router-link to="">
                    <video class="video" v-if="OnlineCourses.uri">
                      <source :src="OnlineCourses.uri" type="video/mp4">
                      您的浏览器不支持 video 标签。
                    </video>
                  </router-link>
                </div>
              </i-col>
              <i-col span="18">
                <div class="OnlineCourses">
                  <ul>
                    <li v-for="dynamic in OnlineCourses.data">
                      <router-link :to="{path:'videoCourse',query:{id:dynamic.id}}">
                        <span>{{dynamic.title}}</span>
                        <span class="label">{{dynamic.createTimeFormate}}</span>
                      </router-link>
                    </li>
                  </ul>
                </div>
              </i-col>
            </Row>

            <Row :gutter="16" v-else>
              <i-col span="6">
                <div class="industry">
                  <a :href="OnlineCourses.uri" class="a" target="_blank">
                    <p class="video">
                      <img :src="OnlineCourses.photoUri" alt="" width="100%">
                    </p>
                  </a>
                </div>
              </i-col>
              <i-col span="18">
                <div class="OnlineCourses">
                  <ul>
                    <li v-for="dynamic in OnlineCourses.data">
                      <a :href="dynamic.uri" class="a" target="_blank">
                        <span>{{dynamic.title}}</span>
                        <span class="label">{{dynamic.createTimeFormate}}</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </i-col>
            </Row>
          </div>
          <!--政策法规-->
          <div class="com">
            <p>
              <span>{{editorialActivities.dynamic}}</span>
              <router-link :to="editorialActivities.link" class="more">更多></router-link>
            </p>
            <Row :gutter="16">
              <!--              <i-col span="6">
                              <div class="industry">
                                <router-link :to="editorialActivities.link">
                                  <img :src="editorialActivities.src" alt="">
                                </router-link>
                              </div>
                            </i-col>-->
              <i-col span="24">
                <news :data="editorialActivities.data" :activeIndex="2"></news>
              </i-col>
            </Row>
          </div>
          <!--专家顾问-->
          <div class="com" style="padding-top: 10px">
            <p>
              <span>专家顾问</span>
              <router-link to="consultants" class="more">全部></router-link>
            </p>
            <carousel3 :Img="Img2"></carousel3>
          </div>
        </i-col>
      </Row>
    </div>
    <!--优秀期刊-->
    <div class="com">
      <p>
        <span>入驻期刊</span>
        <router-link to="/journalHygiene" class="more">全部></router-link>
      </p>
      <div>
        <carousel2 :Img="Img1"></carousel2>
      </div>
    </div>
    <!--重要通知-->
    <Message></Message>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import carousel2 from '../module/carousel2'
  import carousel3 from '../module/carousel3'
  import news from '../module/news'

  import Message from '../common/message'

  export default {
    components: {carousel, news, carousel2, carousel3, Message},
    data() {
      return {
        URL: this.$api.url,
        entrance: [
          {
            man1: [
              /*              {src: require('../../assets/img/u76.png'), name: "稿件评估", link: 'beginToAssess'},*/
              {src: require('../../assets/img/u82.png'), name: "卫生期刊", link: 'journalHygiene'},
              {src: require('../../assets/img/u74.png'), name: "编辑助手", link: 'paperSubmission'},
            ]
          },
        ],
        autoplaySpeed: 5000,
        Img: [],
        Img1: [],
        Img2: [],
        /*期刊动态*/
        industryTrends: {
          dynamic: "期刊动态",
          src: '',
          link: '',
          data: []
        },
        /*政策法规*/
        editorialActivities: {
          dynamic: "政策法规",
          src: '',
          link: '',
          data: []
        },
        /*线上课程*/
        OnlineCourses: {
          dynamic: "线上课程",
          uri: '',
          link: 'onlineCourses2',
          data: []
        },
        /*期刊加盟*/
        league: [],

        data: [],
      }
    },
    mounted() {
      this.dataArray();
    },
    methods: {
      dataArray() {
        /*政策法规、期刊动态、期刊加盟*/
        this.$axios.get(this.URL + '/news/list').then((res) => {
          this.league = res.data.data.league;
          this.industryTrends.data = res.data.data.JournalofInformation;
          this.industryTrends.src = res.data.data.JournalofInformation[0].phoneUri;
          this.industryTrends.link = res.data.data.JournalofInformation[0].uri + '?id=' + res.data.data.JournalofInformation[0].id;
          this.editorialActivities.data = res.data.data.policy;
          this.editorialActivities.src = res.data.data.policy[0].phoneUri;
          this.editorialActivities.link = res.data.data.policy[0].uri + '?id=' + res.data.data.policy[0].id;

          this.data = res.data.data.inform;
        });
        /*线上课程*/
        this.$axios.get(this.URL + '/online/classes/list').then((res) => {
          this.OnlineCourses.data = res.data.data;
          this.OnlineCourses.photoUri = this.OnlineCourses.data[0].photoUri;
          this.OnlineCourses.type = this.OnlineCourses.data[0].type;
          this.OnlineCourses.uri = this.OnlineCourses.data[0].uri;
        });
        /*优秀期刊*/
        this.$axios.get(this.URL + '/periodicals/periodicalsExcellenceImg').then((res) => {
          this.Img1 = res.data;
        });
        /*专家顾问*/
        this.$axios.get(this.URL + '/adviser/Picture').then((res) => {
          this.Img2 = res.data.data
        });
        /*轮播*/
        this.$axios.get(this.URL + '/image/select/list').then((res) => {
          this.Img = res.data
        });

      },
    }
  }
</script>

<style scoped>
  a {
    color: #000;
  }

  .content {
    padding-top: 20px;
  }

  .more {
    float: right;
    color: #888;
    font-size: 15px
  }

  .com > p {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #000;
    color: #000;
  }

  .a, .a > div {
    width: 100%;
  }

  .a > p {
    font-size: 15px;
    /*    color: #000;*/
  }

  .industry {
    padding: 10px 0;
  }

  .industry > a > img, .industry .video {
    width: 170px;
    height: 115px;
  }

  .industry .a span {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -7px;
  }

  .industry > ul li {
    padding: 0;
    margin: 0;
  }

  .industry > ul > li {
    padding: 6px 0;
    text-align: left;
  }

  .industry > ul > li > a {
    font-weight: 400;
    color: #666666;
    font-size: 14px;
  }

  .industry > ul > li > a:hover {
    color: #2b369f;
  }

  /*线上课程*/
  .OnlineCourses {
    /*padding: 20px 0;*/
    /*min-height: 180px;*/
  }

  .OnlineCourses > ul {
    padding-left: 10px;
  }

  .OnlineCourses > ul > li {
    padding: 6px 0;
  }

  .OnlineCourses > ul > li > a {
    font-weight: 400;
    color: #666666;
    font-size: 14px;
  }

  .OnlineCourses > ul > li > a:hover {
    color: #2b369f;
  }

  .label {
    float: right;
  }

  .tu1 {
    display: block;
    width: 128px;
    height: 130px;
    background: url("../../assets/img/u01-1.png") no-repeat;
    background-size: 50%;
    background-position: center;
    background-color: #f3f3f3;
  }

  .tu1:hover {
    background-color: #2b369f !important;
    background: url("../../assets/img/u01-2.png") no-repeat;
    background-size: 50%;
    background-position: center;
  }

  .tu2 {
    display: block;
    width: 128px;
    height: 130px;
    background: url("../../assets/img/u02-1.png") no-repeat;
    background-size: 50%;
    background-position: center;
    background-color: #f3f3f3;
  }

  .tu2:hover {
    background-color: #2b369f !important;
    background: url("../../assets/img/u02-2.png") no-repeat;
    background-size: 50%;
    background-position: center;
  }

  .tu3 {
    display: block;
    width: 128px;
    height: 130px;
    background: url("../../assets/img/u03-1.png") no-repeat;
    background-size: 50%;
    background-position: center;
    background-color: #f3f3f3;
  }

  .tu3:hover {
    background-color: #2b369f !important;
    background: url("../../assets/img/u03-2.png") no-repeat;
    background-size: 50%;
    background-position: center;
  }

  .tu4 {
    display: block;
    width: 128px;
    height: 130px;
    background: url("../../assets/img/u04-1.png") no-repeat;
    background-size: 50%;
    background-position: center;
    background-color: #f3f3f3;
  }

  .tu4:hover {
    background-color: #2b369f !important;
    background: url("../../assets/img/u04-2.png") no-repeat;
    background-size: 50%;
    background-position: center;
  }
</style>
